<template>
   <el-menu
        :style="{width: isCollapse ? '64px' : '230px'}"
        class="asider-contanier"
        @open="handleOpen"
        @close="handleClose"
        :collapse ="isCollapse"
        :default-active="active"
      >
        <p class="logo-lp">{{ isCollapse ? "DIDI" :' DIDI陪诊' }}</p>
        <TreeMenu :index="1" :menuData="menuData"/>
      </el-menu>
</template>

<script setup name="Aside" lang="ts">
import TreeMenu from './treeMenu.vue';
import {useRouter} from 'vue-router'
import {reactive, computed, onMounted} from 'vue'
import {useStore} from 'vuex'

const router = useRouter()
// console.log(router, 'router');
const store = useStore()
const isCollapse = computed(() => store.state.menu.isCollapse)
// const menuData = reactive(router.options.routes[0]?.children || [])
 const menuData = computed(() => store.state.menu.routerList)
//  console.log('menuData', menuData.value)

 const active = computed(() => store.state.menu.menuActive)
  import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

onMounted(() => {
  console.log('menuData', menuData.value)
})
</script>

<style lang="less" scoped>
.asider-contanier {
  height: 100%;
}
.logo-lp {
  color: #303133;
  font-size: 20px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  // color: #fff;
}
</style>